import React from 'react';
import { Button, Form, Input, Space, Modal, Row } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';

const ModuleModal: React.FC<any> = ({ readOnly = false, onFinish, onCancel, formData }) => {
  const [form] = Form.useForm();

  const handleSubmit = async () => {
    form.validateFields().then(async values => {
      onFinish(values);
    });
  };

  return (
    <Modal
      title={formData ? readOnly? '详情模块': '编辑模块' : '配置模块'}
      open
      onOk={handleSubmit}
      onCancel={onCancel}
      width={580}
      maskClosable={false}
      keyboard={false}
      {...(readOnly
        ? {
            footer: (
              <Button type="primary" onClick={onCancel}>
                返回
              </Button>
            ),
          }
        : {})}
    >
      <Form
        form={form}
        initialValues={{
          ...(formData ? { ...formData, email: formData?.email?.split(',') } : {}),
        }}
      >
        <Row justify="space-between">
          <Form.Item
            label="模块名称"
            name="name"
            required
            rules={[
              {
                required: true,
                message: '模块名称不能为空',
              },
              {
                pattern: /^[\u4e00-\u9fa5a-zA-Z0-9]+$/,
                message: '支持输入文本、字母、数字组合',
              },
            ]}
          >
            <Input disabled={Boolean(formData) || readOnly} name="请填写模块名称" />
          </Form.Item>
          <Form.Item label="模块说明" name="description">
            <Input.TextArea
              style={{ height: 76, width: 182, resize: 'none' }}
              name="请填写模块说明"
              maxLength={256}
              disabled={readOnly}
            />
          </Form.Item>
        </Row>

        <Form.List name="email">
          {(fields, { add, remove }, { errors }) => (
            <>
              <Button
                style={{ marginBottom: 12 }}
                onClick={() => add()}
                disabled={readOnly}
                icon={<PlusOutlined />}
              >
                添加邮箱
              </Button>
              {fields.map((field, index) => (
                <Form.Item label="邮箱" required={false} key={field.key}>
                  <Form.Item
                    {...field}
                    validateTrigger={['onChange', 'onBlur']}
                    rules={[
                      {
                        type: 'email',
                        required: true,
                        message: '请填写正确的邮箱格式',
                      },
                    ]}
                    noStyle
                  >
                    <Input
                      disabled={readOnly}
                      placeholder="passenger name"
                      style={{ width: '60%' }}
                    />
                  </Form.Item>
                  {!readOnly && <MinusCircleOutlined
                    style={{ marginLeft: 12 }}
                    onClick={() => remove(field.name)}
                  />}
                </Form.Item>
              ))}
            </>
          )}
        </Form.List>
      </Form>
    </Modal>
  );
};

export default ModuleModal;
